<template>
	<navigator class="asso_card" :url="`/pages/club-detail/club-detail?club_id=${club.id}`">
		<image class="card_img" mode="aspectFit" lazy-load="false" :src="club.club_avatar" />
		<view class="asso_name">{{ club.name }}</view>
		<view class="asso_post">
			<view class="new_post">
				<van-tag class="tag" color="#333" plain>社长</van-tag>
				<text>{{ club.leaderName }}</text>
			</view>
			<view class="new_acitivity">
				<van-tag class="tag" color="#333" plain>活动</van-tag>
				<text>社团活动多多</text> 
			</view>
		</view>
	</navigator>
</template>

<script setup>
defineProps({
	club: {
		type: Object,
		required: true
	}
})
</script>

<style scoped lang="less">
.asso_card {
	border-radius: 10rpx;
	overflow: hidden;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
	width: 375rpx;
	padding-bottom: 30rpx;
	margin-right: 20rpx;
	.card_img {
		width: 100%;
		height: 210rpx;
	}

	.asso_name {
		font-size: 28rpx;
		font-weight: 700;
		margin: 10rpx 15rpx 10rpx;
	}

	.asso_post {
		.new_post,
		.new_acitivity {
			display: flex;
			flex-wrap: nowrap;
			font-size: 26rpx;
			padding: 10rpx 5rpx 5rpx 10rpx;
			.tag {
				box-sizing: border-box;
				vertical-align: middle;
				padding: 1rpx;
				border: 1px solid black;
				margin-right: 10rpx;
			}
		}
	}
}
</style>
